<template>
  <div class="conter_t">
    <div class="conter_left">
      <!--<h3>消息中心</h3>-->
      <ul class="atv_lll">
        <li class="activas" @click="click111($event)">我的消息</li>
        <li @click="click111($event)">他的消息</li>
        <li @click="click111($event)">谁的消息</li>
      </ul>
    </div>
    <div class="conter_right">

      <ul class="atv_rrr">
        <li>qq</li>
        <li style="display: none;">aa</li>
        <li style="display: none;">zz</li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {}

    },
    methods: {
      click111: function (e) {
        $(e.currentTarget).addClass('activas').siblings().removeClass('activas')
        $('.atv_rrr li').eq($(e.currentTarget).index()).show().siblings().hide()
      }
    },
    components: {}
  }
</script>

<style scoped>
  .conter_t {
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto 40px;
  }

  .conter_left {
    width: 220px;
    height: 490px;
    margin-right: 15px;
    background: pink;
    float: left;
  }

  .conter_left h3 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
  }

  .conter_left ul li {
    width: 100%;
    height: 36px;
    line-height: 34px;
    font-size: 17px;
  }

  .conter_right {
    width: calc(100% - 238px);
    height: 498px;
    background: yellow;
    float: left;
    border: 1px solid #b3b3b3;
  }

  .conter_right ul {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .conter_right ul li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 410px;
  }

  .activas {
    color: #ff8328;
  }
</style>
